<template>
	<div class="flex">
		<template v-if="mode == 'one'"> 
			<el-image @click="emit('selectImg','img')" :src="config.serverImg + element.img" fit="scale-down" lazy/>
		</template>
		<template v-else>
			<draggable class="list-group flex" tag="transition-group" :component-data="{
				tag: 'div',
				type: 'transition-group',
				name: !drag ? 'flip-list' : null,
			  }" v-model="data" v-bind="dragOptions" @start="drag = true" @end="drag = false"
			  item-key="v">
			  <template #item="{ element, index }">
				<div class="c8 flex list-group-item">
				  <el-image style="width: 100%; height: 100%" :src="config.serverImg + element.img" fit="contain"></el-image>
				  <div class="c10" @click="data.splice(index, 1)">
					删除
				  </div>
				</div>
			  </template>
			</draggable>
			<div class="c8 flex" @click="emit('selectImg',index)">
				<div class="iconfont">&#xed21;</div>
			</div>
		</template>
	</div>
	<!-- <el-image @click="emit('selectImg','img')" :src="config.serverImg + element.img" fit="scale-down" lazy/> -->
</template>

<script setup>
	import publicJS from "@/hook/public.js";
	const {config,defaultImg} = publicJS();
	
	const emit = defineEmits(["selectImg"]);//自定义事件
	const props = defineProps({

		//是否单张图片
		is_one: {
			type:Boolean,
			default:false
		},
        data: {
			type: Array,
			default: () => {
				return {}
			}
		}
	})



	//拖拽组件配置信息
	import draggable from 'vuedraggable'
	const drag = false;
	const dragOptions = computed(() => {
		return {
			animation: 200,
			group: "description",
			disabled: false,
			ghostClass: "ghost"
		}
	})
	

	//暴露方法给父组件 通过ref.value调用
	defineExpose({
		
	})
</script>

<style scoped lang="scss">
	  .c8 {
    margin-right: 10px;
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
  }
  
  .c8:hover {
    border-color: var(--el-color-primary);
    cursor: pointer;
  }
  
  .c8:hover .c10 {
    opacity: 1;
  }
  
  .c8 img {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .c9 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .c10 {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    width: 100%;
    background: var(--el-color-primary);
    opacity: 0;
    transition: 0.3s;
    text-align: center;
    color: #fff;
    line-height: 30px;
  }
</style>